<template>
    <div class="registerbody">
       <header>
            <van-icon  class="headericon" name="arrow-left"  @click="handleBackPage" />
            <span>注册</span>
            <van-icon name="wap-home-o" class="headericon" @click="handleHome"/>
       </header>
       <main>
            <div>
                <input type="number" placeholder="手机号" v-model.number="username">
                <button>{{randYzm}}</button>
            </div>
            <div>
                <input type="text" placeholder="手机验证" v-model.lazy="yzm">
            </div>
            <div>
                <input type="password" placeholder="密码" v-model.lazy="password">
            </div>
            <div>
                <input type="checkbox" v-model="isAgree">我已阅读并同意
                《<a href="#">萤石服务协议</a>》
                和《<a href="#">萤石隐私政策</a>》
            </div>
            <div  @click="handlePost">
                <button>注册</button>
            </div>
       </main>
    </div>
</template>

<script>
    import { Notify } from 'vant';
import {base_url} from '../utils/baseURL'
    import instance from '../utils/request'
    export default {
        data() {
            return {
                isAgree: false,
                randYzm:"获取验证码",
                yzm:'',
                password:'',
                username:'',
                nowUsers:[]
            }
        },
        created(){
            setTimeout(()=>{
                 this.randYzm = Math.round(Math.random()*10).toFixed(0)
                                + Math.round(Math.random()*10)
                                + Math.round(Math.random()*10)
                                + Math.round(Math.random()*10)
            },5000)
        },
        methods:{
            handlePost(){
                let {isAgree,randYzm,yzm,password,username,nowUsers} = this;
                if(randYzm == yzm && isAgree){
                    instance.post(`${base_url}users`,{
                        username,
                        password
                    }).then(res=>{
                        if(res.data.code==1){
                           this.$router.push('/login')
                            Notify({ type: 'success', message: '注册成功！' })
                        }else{
                            Notify({ type: 'danger', message: '用户名已被注册！' })
                        }
                    })
                }
            },
            handleHome(){
                this.$router.push('/home');
            }
        }
    };
</script>

<style lang="less" scoped>
    @allcolor:#f57537;
    .registerbody{
        height:100vh;
        background: #f8f8f8;
    }
    header{
        width: 100%;
        height:.4rem;
        display: flex;
        padding: 0 .1rem;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        color: #171717;
        background: white;
        .headericon{
            font-size: .2rem;
            color:#777;
        }
    }
    main{
        padding: 0 .1rem;
        div{
            margin-top:.1rem;
            height:.33rem;
        }
        div:nth-child(1){
            display: flex;
            justify-content: space-between;
            input{
                width:2.2rem;
                height: 100%;
                outline: none;
                border-radius: .03rem;
                border:0.01px solid #e6e6e6;
                font-size: .14rem;
                padding-left:.1rem;
                box-sizing: border-box;
            }
            button{
                width: 1.2rem;
                height: 100%;
                border:.01rem solid @allcolor;
                color: @allcolor;
                background:f9f7ea;
                font-size: .14rem;
            }
        }
        div:nth-child(2),div:nth-child(3){
            input{
                background: #eeeeee;
                width: 100%;
                height: 100%;
                border-radius: .03rem;
                border:.01rem solid #e7e7e7;
                font-size: .14rem;
                box-sizing: border-box;
                padding-left:.1rem;
            }
        }
        div:nth-child(3){
            input{
                background: white;
            } 
        }
        div:nth-child(4){
            font-size: .12rem;
            display: flex;
            align-items: center;
            input{
                margin-right: .05rem;
            }
            a{
                color: #2258ab;
            }
        }
        div:nth-child(5){
            height:.44rem;
            button{
                width: 100%;
                height:100%;
                background: @allcolor;
                font-size: .14rem;
                color: white;
                border-radius: .03rem;
                border:none;
            }
        }

    }
</style>